<template>
    <div class='template-container'>
  
      <div class="content">
        <el-col :span="24">
          <el-col :span="5">
            <el-col :span="24">
              <div class="system-list-container">
                <!-- <ul class="system-list">
            <li v-for="(item, index) in systemList"
                @click="toggleSystem(item)"
                :key="index"
                :class="item.system_no===requestParam.system_no?'active':''"
                :label="item.system_no">{{item.name}}({{item.system_no}})
            </li>
          </ul> -->
          <button id="generic-templates" type="button" class="el-button el-button--primary" @click="workerGeneral">设置工人通用模板</button>
                <div class="select-company"
                     style="margin-bottom:0px;">
                  <el-select v-model="selectedCompany"
                             value-key="company_id"
                             @change="chooseCompany">
                    <el-option v-for="(item) in selectedCompanyList"
                               :key="item.company_id"
                               :label="item.company_name"
                               :value="item">
                    </el-option>
                  </el-select>
                  <el-button type="primary"
                             @click="showCompanyListDialog"
                             id="search-style-top">
                    选择单位
                  </el-button>
                </div>
                <OrgainzationTree :selectedNode.sync="currentNode"
                                  :rightMenu="false"
                                  :messageinfo="orgainzationTreeData"></OrgainzationTree>
              </div>
            </el-col>
          </el-col>
          <el-col :span="19">
            <div class="form-container">
              <el-row class="template-header">
                <el-col :span="10">
                  &nbsp;
                </el-col>
                <el-col :span="12">
                  <span style="margin-right:12px;margin-left:8px;">模板名称</span>
                  <el-input class="col-9"
                            v-model="requestParam.auth_template_name"
                            placeholder="请输入模板名称">
  
                  </el-input>
                </el-col>
                <el-col :span="2">
                  <el-button type="primary"
                             @click="searchTemplateList"
                             class="search-button pull-right"
                             id="search-style">
                    搜索
                  </el-button>
                </el-col>
              </el-row>
              <el-table ref='templateTable'
                        @current-change="handleTemplateChange"
                        :data="templateData.list"
                        row-key="auth_template_id"
                        class="template-form"
                        :header-cell-style="{background:'#f5f5f5'}"
                        height="310"
                        highlight-current-row
                        @row-click="selectRow"
                        border>
                <el-table-column prop="auth_template_id"
                                 label="模板编号"
                                 align="center"
                                 show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="auth_template_name"
                                 label="模板名称"
                                 align="center"
                                 show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作"
                                 align="center">
                  <template slot-scope="scope">
                    <el-button size="mini"
                               type="text"
                               @click="handleEdit('edit',scope)">
                      修改
                    </el-button>
  
                    <el-button size="mini"
                               type="text"
                               @click="handleDelete('template',scope)">
                      删除
                    </el-button>
                    <el-button size="mini"
                               type="text"
                               @click="assignPermissionDialog(scope)">
                      分配权限
                    </el-button>
                    <el-button size="mini"
                               type="text"
                               @click="copyUnit(scope.row)">复制到其他单位</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div style="margin-top:-10px;">&nbsp;</div>
              <div style="display:flex;flex-direction:row;justify-content:space-between;">
                <div>&nbsp;</div>
                <el-pagination @current-change="handleTemplateCurrentChange"
                               :current-page="requestParam.page"
                               :page-sizes="[10]"
                               :page-size="requestParam.page_size"
                               layout="total,sizes,prev, pager, next, jumper"
                               background
                               align="center"
                               id="pagination"
                               :total="templateData.total_count"
                               style="">
                </el-pagination>
                <el-button type="primary"
                           class="pull-right"
                           @click="handleEdit('create',{})"
                           id="search-style">
                  新增
                </el-button>
              </div>
              <el-row>
              </el-row>
              <el-tabs type="border-card"
                       class="data-tabs"
                       style="margin-top:20px;">
                <el-tab-pane label="权限管理">
                  <el-form class="template-permission-form"
                           :model="templatePermissionForm"
                           label-width="70px">
                    <el-row>
                      <el-col :span="4">
                        &nbsp;
                      </el-col>
                      <el-col :span="9">
                        <el-form-item label="权限类型"
                                      prop="object_sort">
                          <el-select v-model="templatePermissionForm.object_sort"
                                     style="width:100%!important;"
                                     @change="searchTemplatePermissionList">
                            <el-option label="全部"
                                       value="0">
                            </el-option>
                            <el-option label="页面"
                                       value="1">
                            </el-option>
                            <el-option label="子页面"
                                       value="2">
                            </el-option>
                            <el-option label="按钮"
                                       value="3">
                            </el-option>
                            <el-option label="组件"
                                       value="4">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9">
                        <el-form-item label="检索"
                                      label-width="55px"
                                      prop="search_word">
                          <el-input v-model="templatePermissionForm.search_word"
                                    placeholder="支持名称/路径/编号模糊匹配"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="2"
                              style="text-align:right;">
                        <el-button type="primary"
                                   @click="searchTemplatePermissionList"
                                   id="search-style">搜索</el-button>
                      </el-col>
                    </el-row>
                  </el-form>
                  <el-table class="template-permission-table"
                            :data="templatePermissionData.list"
                            :header-cell-style="{background:'#f5f5f5'}"
                            height="310"
                            border>
                    <el-table-column prop="object_name"
                                     label="权限名称"
                                     align="center"
                                     show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="object_sort_name"
                                     label="权限类型"
                                     align="center"
                                     show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="object_no"
                                     label="权限编号"
                                     align="center"
                                     show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="操作"
                                     align="center">
                      <template slot-scope="scope">
                        <el-button size="mini"
                                   type="text"
                                   @click="handleDelete('permission',scope)">
                          删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-col :span="24"
                          align="center">
                    <!-- @size-change="handlePermissionSizeChange" -->
                    <el-pagination @current-change="handlePermissionCurrentChange"
                                   :current-page="templatePermissionForm.page"
                                   :page-sizes="[10]"
                                   :page-size="templatePermissionForm.page_size"
                                   layout="total,sizes,prev, pager, next, jumper"
                                   background
                                   id="pagination"
                                   :total="templatePermissionData.total_count">
                    </el-pagination>
                  </el-col>
  
                </el-tab-pane>
              </el-tabs>
  
            </div>
          </el-col>
        </el-col>
  
      </div>
      <el-dialog title="分配权限"
                 :close-on-click-modal="false"
                 width="50%"
                 :visible.sync="assignPermissionVisible">
        <!-- <PermissionTree :showCheckbox="true"
                        :isVisible="assignPermissionVisible"
                        :curPermissionIds.sync="assignPermissionIds"></PermissionTree> -->
        <div class="tabPermissions" style="margin-bottom:5px;">
          <span style="margin-right:10px;" :class="{'activeColor':type==='webPermissions'}" @click="changePermissions('webPermissions')">web权限</span>
          <span style="margin-right:10px;" :class="{'activeColor':type==='lightApplication'}" @click="changePermissions('lightApplication')">轻应用权限</span>
        </div>
        <AssignTempalte :showCheckbox="false"
                        :isVisible="assignPermissionVisible"
                        :curPermissionIds.sync="assignPermissionIds"></AssignTempalte>
        <div style="text-align:center;">
          <el-button @click="assignPermissionVisible=false"
                     style="margin-right:15px!important;color:white;"
                     id="search-style">取消</el-button>
          <el-button type="primary"
                     id="search-style"
                     @click="assignPermission">确定</el-button>
        </div>
      </el-dialog>
      <!-- 公司列表弹框 -->
      <el-dialog title="选择单位"
                 :visible.sync="companyListVisible"
                 :before-close="handleClose"
                 :close-on-click-modal="false">
        <!-- title="选择公司" -->
        <el-form :model="getCompanyListParam"
                 label-width="20px">
          <el-row>
            <el-col :span="24">
              <el-col :span="3">
                &nbsp;
              </el-col>
              <el-col :span="9"
                      class="unit-style-left">
                <el-form-item label-width="25px">
                  <el-select v-model="getCompanyListParam.company_type"
                             @change="getCompanyList">
  
                    <el-option v-for="item in companyTypeList"
                               :key="item.code_id"
                               :label="item.name"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="9"
                      class="unit-style-left">
                <el-form-item label-width="15px">
                  <el-input v-model="getCompanyListParam.company_name"
                            placeholder="请输入公司名称">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3"
                      style="text-align:right;">
                <el-button @click="getCompanyList"
                           type="primary"
                           style="width:100%!important;text-align:center;padding:0px!important;height:40px;line-height:40px;"
                           id="search-style">搜索</el-button>
              </el-col>
            </el-col>
  
          </el-row>
        </el-form>
        <el-table :data="companyList.list"
                  ref="multipleTable"
                  @row-click="selectCompany"
                  @selection-change='handleSelectionChange'
                  :row-key="(row) => row.company_id"
                  :highlight-current-row="true"
                  :header-cell-style="{background:'#f5f5f5'}"
                  height="310"
                  border
                  style="margin-bottom:20px;">
          <el-table-column type="selection"
                           :reserve-selection="true"
                           v-if="openType==='copy'"></el-table-column>
          <el-table-column prop="company_name"
                           label="单位名称"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="addr"
                           label="单位地址"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="contact_name"
                           label="负责人"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="contact_phone"
                           label="联系电话"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="create_date"
                           label="入驻时间"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <el-pagination id="pagination"
                       @current-change="handleCompanyCurrentChange"
                       :current-page="getCompanyListParam.page"
                       :page-sizes="[5,10,15]"
                       :page-size="getCompanyListParam.page_size"
                       background
                       align="center"
                       layout="total,sizes,prev, pager, next, jumper"
                       :total="companyList.total_count">
        </el-pagination>
        <div style="text-align:center;margin-top:20px;">
          <el-button @click="cancelChoose"
                     id="back-style">取消</el-button>
          <el-button type="primary"
                     @click="confirmChooseCompany"
                     id="search-style"
                     style="margin-left:16px;">确定</el-button>
        </div>
      </el-dialog>
      <!-- 新增/修改模板弹框 -->
      <el-dialog :title="ontype=='edit'?'修改模板':'新增模板'"
                 :close-on-click-modal="false"
                 width="40%"
                 :visible.sync="editTemplateVisible">
        <el-form :model="editTemplateForm"
                 label-width="75px">
          <el-form-item label="模板名称"
                        prop="auth_template_name">
            <el-input v-model="editTemplateForm.auth_template_name">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer"
             class="dialog-footer"
             style="text-align:center;margin-top:-30px;">
          <el-button @click="editTemplateVisible=false"
                     id="back-style"
                     style="margin-right:15px;">取消</el-button>
          <el-button type="primary"
                     @click="editTemplate"
                     id="search-style">确定</el-button>
        </div>
      </el-dialog>
    
    </div>
  </template>
  <script>
  import PermissionTree from '@/components/PermissionTree/PermissionTree'
  import AssignTempalte from '@/components/PermissionTree/AssignTemplateList';
  import OrgainzationTree from '@/components/OrgainzationTree/OrgainzationTree'
  import { OBSManageApi } from '@/services/orgainzeManage'
  import { templateApi, permissionManageApi } from '@/services/PermissionManage'
  
  export default {
    data () {
      return {
        currentRowRight: '',
        ontype: '',//判断是新增还是修改
        requestParam: {
          company_id: '',
          org_no: '',
          auth_template_name: '',
          is_page: 1,
          page: 1,
          page_size: 10
        },
        // 模板列表数据
        templateData: {
          total_page: 0,
          total_count: 0
        },
        // 新增或编辑模板表单参数
        editTemplateForm: {
          auth_template_name: '',
          company_id: '',
          org_no: ''
        },
        editTemplateStatus: '',
        editTemplateVisible: false,
        // 模板对应权限列表数据
        templatePermissionData: {
          total_page: 0,
          total_count: 0
        },
        // 模板对应权限列表筛选表单
        templatePermissionForm: {
          auth_template_id: '',
          object_sort: '',
          search_word: '',
          is_page: 1,
          page: 1,
          page_size: 10
        },
        // 系统列表
        systemList: [
          { name: '工业化平台', system_no: 'plat' },
          { name: '实测实量', system_no: 'scsl' },
          { name: '分户验收', system_no: 'fhys' },
          { name: '问答机器人', system_no: 'wdrobot' },
          { name: '能耗监测系统', system_no: 'nh' }
        ],
        // 分配权限时的参数对象
        assignPermissionParam: {
          auth_template_id: '',
          object_ids: ''
        },
        assignPermissionIds: [],
        // 分配权限弹框是否可见
        assignPermissionVisible: false,
        // 权限树数据
        permissionTreeData: [],
        // 权限树请求参数
        permissionTreeParam: {
          type: 'all'
        },
        // 获取左侧组织树参数
        orgainzationTreeParam: {
        },
        // 组织管理树数据
        orgainzationTreeData: [],
        // 当前选择节点
        currentNode: {},
        // 获取单位列表参数
        getCompanyListParam: {
          company_type: '',
          company_name: '',
          is_page: 1,
          page: 1,
          page_size: 10
        },
        // 选择单位弹框是否可见
        companyListVisible: false,
        // 单位列表
        companyList: {
          list: []
        },
        // 单位类型列表
        companyTypeList: [],
        // 已选择的公司列表
        selectedCompanyList: [],
        // 当前选中的公司
        selectedCompany: {
          company_id: '',
          company_name: ''
        },
        openType: '',  //选择单位还是复制
        authId: '', //模板id
        authName: '',  //模板名称
        checkIds: [],  //选择的单位id
        type:'webPermissions', 
      }
    },
    watch: {
      currentNode: {
        handler (newval, oldval) {
          this.requestParam.company_id = newval.company_id
          this.requestParam.org_no = newval.org_no
          this.getTemplateList()
          //console.log(newval, 'watch')
        },
        deep: true
      },
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    components: {
      PermissionTree,
      OrgainzationTree,
      AssignTempalte
    },
    methods: {
      //页面刷新
      beforeunloadHandler (e) {
        e = e || window.event
        if (e) {
          window.sessionStorage.removeItem('unitData')
          window.sessionStorage.removeItem('unitDefaultData')
        }
      },
      handleTemplateChange (val) {
        this.currentRowRight = val;
      },
      //当前表格第一行数据的背景色
      setCurrent (row) {
        this.$refs.templateTable.setCurrentRow(row);
      },
      //选择单位弹框右上角关闭事件
      handleClose (done) {
  
        done();
        this.getCompanyListParam.company_name = '';
        this.getCompanyListParam.company_type = '';
      },
      // 获取权限模板列表
      getTemplateList () {
        templateApi.getTemplateList({
          params: this.requestParam
        }).then(res => {
          this.templateData = res.data;
          //右边表格默认的是第一条添加背景色（表数据不为空的情况下）
          if (this.templateData.list.length != 0) {
            this.setCurrent(this.templateData.list[0]);
            //默认点击表格第一行数据
            this.selectRow(this.templateData.list[0]);
          }
          // console.log(res, 'get template list')
        })
      },
      searchTemplateList () {
        this.requestParam.page = 1
        this.getTemplateList()
      },
      // 新增或编辑模板弹框
      handleEdit (type, scope) {
        if (type === 'edit') {
          this.ontype = 'edit';
          this.editTemplateForm = JSON.parse(JSON.stringify(scope.row));
        } else {
          this.ontype = 'create'
          delete this.editTemplateForm.auth_template_id
          this.editTemplateForm.auth_template_name = ''
          this.editTemplateForm.company_id = this.requestParam.company_id
          this.editTemplateForm.org_no = this.requestParam.org_no
        }
        this.editTemplateVisible = true
        this.editTemplateStatus = type
      },
      // 新增或编辑模板接口
      editTemplate () {
        if (this.editTemplateStatus === 'edit') {
          templateApi.updateTemplate({
            data: this.editTemplateForm
          }).then(res => {
            //console.log(res, 'edit template api')
            if (res.code === 0) {
              this.$message.success('修改模板成功')
              this.getTemplateList()
              this.editTemplateVisible = false
            }
          })
        } else {
          templateApi.createTemplate({
            data: this.editTemplateForm
          }).then(res => {
            // console.log(res, 'create template api')
            if (res.code === 0) {
              this.$message.success('新增模板成功')
              this.getTemplateList()
              this.editTemplateVisible = false
            }
          })
        }
      },
      // 删除模板或权限-确认
      handleDelete (type, scope) {
        //let msg = type === 'template' ? '是否删除模板?' : '是否删除权限?'
        //let msg = '此操作将永久删除, 是否继续?'
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (type === 'template') {
            this.deleteTemplate(scope.row.auth_template_id)
          } else {
            this.deletePermission(scope.row.role_priv_id)
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除!'
          });
        })
      },
      // 删除模板-调用接口
      deleteTemplate (id) {
        templateApi.deleteTemplate({
          data: {
            auth_template_id: id
          }
        }).then(res => {
          // console.log(res, 'delete template')
          this.getTemplateList()
          this.templatePermissionData = []
        })
      },
      // 删除权限-调用接口
      deletePermission (id) {
        templateApi.deletePermission({
          data: {
            role_priv_id: id
          }
        }).then(res => {
          //console.log(res, 'delete permission')
          this.getTemplatePermissionList()
        })
      },
      // 选择模板列表的当前行
      selectRow (row) {
        //console.log(row, 'select row')
        this.templatePermissionForm.auth_template_id = row.auth_template_id
        delete this.templatePermissionForm.object_sort
        // this.templatePermissionForm.object_sort = 0
        this.getTemplatePermissionList()
      },
      // 打开分配权限弹框
      assignPermissionDialog (scope) {
        this.assignPermissionParam.auth_template_id = scope.row.auth_template_id
        this.permissionTreeParam.assign_id = scope.row.auth_template_id
        this.permissionTreeParam.is_assign = 1
        this.getPermissionTreeData()
      },
      // 为当前行的模板分配权限
      assignPermission (scope) {
        // let ids = []
  
        if (this.assignPermissionIds.length > 0) {
          console.log(this.assignPermissionIds);
          // this.assignPermissionIds.map((item) => {
          //   ids.push(item.object_id)
          // })
          // console.log(this.assignPermissionParam.object_ids, '选择的权限编号');
          this.assignPermissionParam.object_ids = this.assignPermissionIds.join(',')
          templateApi.assignTemplatePermission({
            data: this.assignPermissionParam
          }).then(res => {
            if (res.code === 0) {
              this.$message.success('分配权限成功')
              this.assignPermissionVisible = false
              this.getTemplateList()
              this.getTemplatePermissionList()
            }
          })
        } else {
          this.$message.error('请选择至少一项权限')
          this.assignPermissionParam.object_ids = ''
        }
      },
      // 获取对应模板下的权限
      getTemplatePermissionList () {
        if (this.templatePermissionForm.object_sort === '') {
          delete this.templatePermissionForm.object_sort
        }
        templateApi.getTemplatePermissionList({
          params: this.templatePermissionForm
        }).then(res => {
          this.templatePermissionData = res.data
          // console.log(res, 'get template permission list')
        })
      },
      // 搜索模板权限
      searchTemplatePermissionList () {
        this.templatePermissionForm.page = 1
        this.getTemplatePermissionList()
      },
      // 切换系统
      toggleSystem (system) {
        this.requestParam.system_no = system.system_no
        this.getTemplateList()
        this.templatePermissionData = []
      },
  
      handleTemplateSizeChange () {
  
      },
      handleTemplateCurrentChange (current) {
        this.requestParam.page = current
        this.getTemplateList()
      },
      handlePermissionSizeChange () {
  
      },
      handlePermissionCurrentChange (current) {
        this.templatePermissionForm.page = current
        this.getTemplatePermissionList()
      },
      // 获取权限树数据
      getPermissionTreeData () {
        permissionManageApi.getPermissionTreeData({
          params: this.permissionTreeParam
        }).then(res => {
          this.permissionTreeData = res.data
          this.$store.dispatch('setPermissionTree', this.permissionTreeData)
          window.localStorage.setItem('permissionTree', JSON.stringify(this.permissionTreeData))
          //console.log(res, 'permission tree data')
          this.assignPermissionVisible = true
        })
      },
      // 在下拉框中选择公司
      chooseCompany (item) {
        //切换的时候更新一下存储的单位
        window.sessionStorage.setItem('unitDefaultData', JSON.stringify(this.selectedCompany))
        this.orgainzationTreeParam.company_id = item.company_id
        this.orgainzationTreeParam.company_name = item.company_name
        // console.log(this.orgainzationTreeParam.company_name);
        this.getOrgainzationTree()
      },
      // 获取左侧组织树
      getOrgainzationTree () {
        this.companyListVisible = false
        templateApi.getOrganizationTree({
          params: this.orgainzationTreeParam
        }).then(res => {
          console.log(res, 'orgainzation tree')
          if (res.code === 0) {
            // this.orgainzationTreeData = this.handleData(res.data)
            this.orgainzationTreeData = res.data
            this.$store.dispatch('setOrgainzationTree', this.orgainzationTreeData)
            window.localStorage.setItem('orgainzationTree', JSON.stringify(this.orgainzationTreeData))
          }
        })
      },
      // 因为权限模板页面的组织树只显示到组织级别,需要处理下数据
      handleData (arr) {
        if (Object.prototype.toString.call(arr) === '[object Array]') {
          // arr.map((item, index) => {
          //   if (item.node_type !== '1') {
          //     // delete item
          //     arr.splice(index, 1)
          //   } else if (item.children_list) {
          //     this.handleData(item.children_list)
          //   }
          // })
          for (var i = 0; i < arr.length; i++) {
            let item = arr[i]
            if (item.node_type !== '1') {
              arr.splice(i, 1)
              i = i - 1
              // this.handleData(arr[i].children_list)
            } else if (item.children_list) {
              this.handleData(item.children_list)
            }
          }
          return arr
        }
      },
      // 显示公司列表弹框
      showCompanyListDialog () {
        this.openType = 'choose'
        this.companyListVisible = true
        this.getChooseList();
        this.orgainzationTreeParam.company_id = '';
        this.orgainzationTreeParam.company_name = '';
      },
      //复制到其他单位
      copyUnit (row) {
        this.openType = 'copy'
        this.companyListVisible = true
        this.authId = row.auth_template_id
        this.authName = row.auth_template_name
        this.getCopyCompanyList();
      },
      //获取未分配权限的单位列表
      getCopyCompanyList () {
        templateApi.getApportionList({
          params: { auth_template_name: this.authName, ...this.getCompanyListParam }
        }).then(res => {
          if (res.code === 0) {
            this.companyList = res.data
          }
        })
      },
      //选择单位
      handleSelectionChange (rows) {
        console.log(rows, '选择');
        this.checkIds = []
        rows.forEach(item => {
          let obj = {
            org_no: item.org_no,
            company_id: item.company_id
          }
          this.checkIds.push(obj)
          console.log(this.checkIds);
        });
      },
      //获取选择单位公司列表
      getChooseList () {
        OBSManageApi.getCompanyList({
          params: this.getCompanyListParam
        }).then(res => {
          if (res.code === 0) {
            this.companyList = res.data
          }
        })
      },
      // 获取公司列表
      getCompanyList () {
        if (this.openType === 'copy') {
          this.getCopyCompanyList()
        } else {
          this.getChooseList()
        }
      },
      // 公司列表分页跳转
      handleCompanyCurrentChange (current) {
        this.getCompanyListParam.page = current
        this.getCompanyList()
      },
      // 公司列表选择行
      selectCompany (row) {
        this.orgainzationTreeParam.company_id = row.company_id
        this.orgainzationTreeParam.company_name = row.company_name
      },
      // 在弹框中确定选择某行数据
      confirmChooseCompany () {
        if (this.openType === 'choose') {
          //选择单位
          if (this.orgainzationTreeParam.company_id == '' && this.orgainzationTreeParam.company_name == '') {
            this.$message('请先选中数据!');
          } else {
            this.updateSelectedCompanyList(this.orgainzationTreeParam.company_id, this.orgainzationTreeParam.company_name);
  
            console.log(this.selectedCompanyList, 'selected company list');
            this.getOrgainzationTree();
          }
        } else {
          //复制权限
          if (this.checkIds.length === 0) {
            this.$message.warning('请先选择单位')
          } else {
            this.saveCopyList()
          }
        }
      },
      //取消
      cancelChoose () {
        this.companyListVisible = false
        this.getCompanyListParam.company_name = ''
        this.getCompanyListParam.company_type = ''
        if (this.openType === 'copy') {
          this.$refs.multipleTable.clearSelection();
        }
      },
      //复制权限
      saveCopyList () {
        templateApi.changeApportion({
          data: { auth_template_id: this.authId, auth_template_name: this.authName, company_data: this.checkIds }
        }).then(res => {
          // console.log(res, 'get company list')
          if (res.code === 0) {
            this.$message.success('复制成功!')
            this.companyListVisible = false
            this.$refs.multipleTable.clearSelection();
          }
        })
      },
      // 如果已选择公司列表中不存在该公司，则添加该公司
      updateSelectedCompanyList (id, name) {
        let flag = false
        this.selectedCompanyList.map((item) => {
          if (item.company_id === id) {
            flag = true
            let obj = {
              company_id: id,
              company_name: name
            }
            this.selectedCompany = obj
            console.log(this.selectedCompany);
            window.sessionStorage.setItem('unitDefaultData', JSON.stringify(this.selectedCompany))
          }
        })
        if (!flag) {
          let obj = {
            company_id: id,
            company_name: name
          }
          this.selectedCompany = obj
          this.selectedCompanyList.push(obj)
          console.log(this.selectedCompanyList);
          //将选择的单位存到sessonStorage里面,列表数据,和当前选择的值
          window.sessionStorage.setItem('unitData', JSON.stringify(this.selectedCompanyList))
          window.sessionStorage.setItem('unitDefaultData', JSON.stringify(this.selectedCompany))
        } else {
  
        }
      },
      // 获取公司类型列表
      getCompanyTypeList () {
        OBSManageApi.getCompanyTypeList({
          params: {
            code_type: 'companyType',
            is_page: 0
          }
        }).then(res => {
          //console.log(res, 'get company type list')
          if (res.code === 0) {
            this.companyTypeList = []
            this.companyTypeList.push({ name: '全部', value: '', code_id: '0' })
            this.companyTypeList = this.companyTypeList.concat(res.data.list)
          }
        })
      },
      // 点击树的节点触发的函数
      handleNodeClick(data){
        console.log(data);
      },
      // 点击工人通用模板按钮
      workerGeneral(){
        this.assignPermissionVisible=true
      },

      changePermissions(val){
        this.type=val
      }
    },
    created () {
      this.getCompanyTypeList()
      // this.getTemplateList()
      // this.getPermissionTreeData()
      // this.getOrgainzationTree()
      this.$store.dispatch('setOrgainzationTree', [])
  
      //获取存储的单位信息
      let unit = JSON.parse(window.sessionStorage.getItem('unitData'))
      let unitDefault = JSON.parse(window.sessionStorage.getItem('unitDefaultData'))
      if (this.selectedCompany.company_name === '' && unit) {
        this.selectedCompanyList = unit
        if (unitDefault) {
          this.selectedCompany.company_id = unitDefault.company_id
          this.orgainzationTreeParam.company_id = unitDefault.company_id
          this.orgainzationTreeParam.company_name = unitDefault.company_name
          this.getOrgainzationTree()
        }
      }
    
    },
    mounted () {
      //监听页面刷新
      window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    },
    destroyed () {
      window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
    },
  }
  </script>
  <style scoped lang='scss'>
  /deep/ .unit-style-left .el-form-item__content {
    line-height: 40px;
    position: relative;
    font-size: 14px;
    width: 82% !important;
  }
  /deep/ .data-tabs .el-form-item__content {
    line-height: 40px;
    position: relative;
    font-size: 14px;
    width: 74% !important;
  }
  /deep/ .el-tabs--border-card > .el-tabs__content {
    //padding: 15px;
    margin: 0px !important;
    padding: 0px !important;
    padding-bottom: 20px !important;
  }
  #search-style-top {
    width: 100px;
    margin: 0px;
    padding: 0px;
    height: 40px;
    line-height: 40px;
    margin-left: 20px;
    background: rgba(26, 188, 156, 1);
  }
  #generic-templates{
    width: 128px;
    margin: 0px;
    padding: 0px;
    height: 40px;
    line-height: 40px;
    background: rgba(26, 188, 156, 1);
  }
  #back-style {
    background: rgba(26, 188, 156, 1);
    color: white;
  }
  #search-style {
    background: rgba(26, 188, 156, 1);
  }
  
  /deep/ #pagination .el-pager .active {
    background: #1abc9c;
    color: white;
  }
  /deep/ #pagination .el-pager .active:hover {
    color: #fff;
  }
  /deep/ #pagination .el-pager li:hover {
    color: #1abc9c;
  }
  /deep/ .current-row > td {
    background: #1890ff !important;
    color: white;
  }
  /deep/ .current-row > td .el-button {
    color: white;
  }
  .template-container {
    padding: 20px;
    background: #ffffff;
    .el-form-item__content {
      display: flex;
    }
    .el-button + .el-button {
      margin-left: 0;
    }
    .template-header {
      margin-bottom: 20px;
    }
    .content {
      display: flex;
      .system-list-container {
        // width: 250px;
        height: 400px;
        display: flex;
        flex-direction: column;
        border-left: 0;
        background-color: #fff;
        padding-top: 20px;
        .select-company {
          display: flex;
          // width: 230px;
          margin: 10px 0;
          .el-button {
            margin-left: 5px;
            height: 40px;
            line-height: 9px;
          }
        }
        .search-btn {
          margin-left: 15px;
        }
        .system-list {
          width: 100%;
          background-color: #fff;
          li {
            width: 100%;
            height: 40px;
            line-height: 40px;
            padding-left: 15px;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
            &.active {
              background-color: #3399cc;
            }
          }
        }
      }
      .form-container {
        flex-grow: 1;
        position: relative;
        margin-left: 20px;
        margin-right: 0px;
        .template-form {
          margin-bottom: 20px;
        }
        .template-permission-form {
          margin-top: 20px;
        }
        .template-permission-table {
          margin-bottom: 20px;
        }
      }
    }
  }
  .activeColor{
    color: #1890ff;
  }
  </style>
  